<script setup lang="ts">
import { Fieldset } from '@ark-ui/vue/fieldset'
import { RadioGroup } from '@ark-ui/vue/radio-group'

const frameworks = [
  { id: 'react', label: 'React' },
  { id: 'solid', label: 'Solid' },
  { id: 'vue', label: 'Vue' },
  { id: 'svelte', label: 'Svelte' },
]
</script>

<template>
  <Fieldset.Root>
    <Fieldset.Legend>Select a framework</Fieldset.Legend>
    <RadioGroup.Root name="framework">
      <RadioGroup.Item v-for="framework in frameworks" :key="framework.id" :value="framework.id">
        <RadioGroup.ItemControl />
        <RadioGroup.ItemText>{{ framework.label }}</RadioGroup.ItemText>
        <RadioGroup.ItemHiddenInput />
      </RadioGroup.Item>
    </RadioGroup.Root>
    <Fieldset.HelperText>Choose your preferred framework</Fieldset.HelperText>
    <Fieldset.ErrorText>Please select a framework</Fieldset.ErrorText>
  </Fieldset.Root>
</template>
